<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 页面卡片组件 -->
      <el-card shadow="never" aria-setsize="120px">
        <!-- 目录管理 -->
        <el-row  type="flex" justify="space-between" style="width:100%; height: 40px">
        <!-- 头部结构 -->
          <el-form :inline="true" :model="pageData" class="demo-form-inline" >
            <el-form-item label="目录名称" prop="directoryName">
              <el-input v-model="pageData.directoryName" placeholder="目录名称"></el-input>
            </el-form-item>
            <el-form-item label="状态选择" prop='state'>
              <!-- 搜索下拉框状态 -->
              <el-select v-model.number="pageData.state"  placeholder="请选择">
                <el-option label="禁用" :value="1"></el-option>
                <el-option label="启用" :value="0" ></el-option>
              </el-select>

            </el-form-item>
            <el-form-item>
                  <el-col>
                    <el-button @click="onSubmit('clear')">清除</el-button>
                    <el-button type="primary" @click="onSubmit('search')">搜索</el-button>
                  </el-col>
            </el-form-item>
          </el-form>
            <el-col :span="6">
                  <el-button v-if="$route.query.id"  @click="$router.back()" type="text"><i class="el-icon-arrow-left"></i>返回学科</el-button>
                  <el-button @click="OnSubject('add')" class="addList"><i class="el-icon-edit"></i>新增目录</el-button>
            </el-col>
          </el-row>

        <!-- 提示条数 -->
          <div class="alert">
            <el-alert
              :title="`数据一共 ${tableData.length} 条`"
              type="info"
              :closable="false"
              show-icon>
            </el-alert>
          </div>

        <!-- 主体表格渲染 -->
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              label="序号"
              type="index"
              width="180"
              :index="indexMethod">
            </el-table-column>
            <el-table-column
              label="所属学科"
              prop="subjectName"
              width="180">
            </el-table-column>
            <el-table-column
              label="目录名称"
              prop="directoryName"
              width="180">
            </el-table-column>
            <el-table-column
              label="创建者"
              prop="username"
              width="180">
            </el-table-column>
            <el-table-column
              label="创建日期"
              prop="addDate"
              width="180">
              <template #default="{row}">
                {{fromTime(row.addDate)}}
              </template>
            </el-table-column>
            <el-table-column
              label="面试题数量"
              prop="totals"
              width="180">
            </el-table-column>
            <!-- formatter组件中用来格式化内容 -->
            <el-table-column
              label="状态"
              prop="state"
              :formatter="formatState"
              width="180">
            </el-table-column>
            <el-table-column
              label="操作"
              width="180">

          <!-- 组件方法, row 指的是每一行 -->
            <template slot-scope="{ row }">
                <el-button  @click="Disable(row.id, row.state, row)" type="text" size="small">
                  <span v-if="row.state">启用</span>
                  <span v-else>禁用</span>
                </el-button>
                <!-- 行内三元禁用状态 -->
                <el-button :disabled="row.state == 1 ? true : false" @click="OnSubject('edit',row)" type="text" size="small">修改</el-button>
                <el-button :disabled="row.state == 1 ? true : false" @click="del(row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

        <!-- 底部页码 -->
        <div class="blockPage">
          <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageData.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total">
            </el-pagination>
        </div>
      </el-card>

        <!-- dialog弹窗 -->
        <el-dialog  :title="directorysTitle" @close="closeDialog" :visible.sync="dialogFormVisible" width="400px">

          <!-- 弹窗结构表单 -->
          <el-form ref="dialogForm" :model="directorysForm" :rules="directorysRules">
            <!-- 表单下拉框 -->
            <el-form-item label="所属学科" prop="subjectID" label-width="100px">
              <el-select v-model="directorysForm.subjectID" style="width: 100%;" placeholder="请选择活动区域">
                <el-option
                  v-for="item in tableData"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.subjectID"
                  ></el-option>
              </el-select>
            </el-form-item>
            <!-- 表单文本框 -->
            <el-form-item label="目录名称" prop="directoryName" label-width="100px">
              <el-input v-model="directorysForm.directoryName" style="width:100%;"></el-input>
            </el-form-item>
          </el-form>

          <!-- 弹框表格底部按钮 -->
          <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="btnOk">确 定</el-button>
          </div>
        </el-dialog>

    </div>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
// 导入所需接口
import { list, changeState, remove, add, update } from '@/api/hmmm/directorys'
export default {
  data () {
    return {
      // 渲染下拉框
      total: 15, // 总页数
      tableData: [], // 表格数据列表
      dialogType: 'add', // 点击接收的值
      dialogFormVisible: false, // 框显示或隐藏

      // 页面数据
      pageData: {
        page: 1, // 当前页
        state: null, // 状态
        pagesize: 10, // 每页显示页数
        subjectName: '', // 所属名称
        directoryName: '' // 目录名称
      },

      // 弹窗表单数据
      directorysForm: {
        id: '', // id
        subjectID: '', // 学科id
        directoryName: '' // 目录名称
      },

      // 表格校验规则
      directorysRules: {
        subjectID: [
          // required 是否可选, message 提示消息, trigger 触发类型
          { required: true, message: '所属学科不为空', trigger: ['change', 'blur'] }
        ],
        directoryName: [
          // required 是否可选, message 提示消息, trigger 触发类型
          { required: true, message: '所属目录不为空', trigger: ['change', 'blur'] },
          { min: 1, max: 15, message: '长度不符合规则', trigger: ['change', 'blur'] }
        ]
      }

    }
  },
  // 进入页面要操作的事
  created () {
    getCompanys()
    getQuestion()
    // 进入页面就执行渲染函数
    this.getDirctorys()
  },
  // 计算属性 判断点击数据渲染的标题
  computed: {
    directorysTitle () {
      let title = ''
      if (this.dialogType === 'add') title = '新增目录'
      if (this.dialogType === 'edit') title = '修改目录'
      return title
    }
  },
  // 函数区
  methods: {
    // 请求赋值渲染数据
    async getDirctorys () {
      if (this.$route.query.id) {
        const res = await list({ ...this.pageData, subjectID: this.$route.query.id })
        // const res = await detail(this.$route.query.id)
        this.tableData = res.data.items // 表格数据渲染
        this.total = res.data.counts // 总页数
      } else {
        const res = await list(this.pageData) // 请求
        this.tableData = res.data.items // 表格数据渲染
        this.total = res.data.counts // 总页数
        // console.log(this.tableData)
      }
    },
    // 处理时间
    fromTime (timer) {
      const jsonDate = new Date(timer).toJSON()
      // 东八区需要加八小时
      const Datatimer = new Date(jsonDate).getTime() + 8 * 3600 * 1000
      return new Date(Datatimer)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },

    // 点击修改 点击添加,不同操作
    async OnSubject (type, row) {
      // 显示弹窗
      this.dialogFormVisible = true
      // 判断点击状态
      this.dialogType = type
      // 判断类型不是添加, 则是编辑
      if (type !== 'add') {
        // 点击编辑 数据回显, row是个对象里面包含每行数据
        this.directorysForm = {
          id: row.id, // 每行 点击修改获取将数据回显
          subjectID: row.subjectID, // 每行 点击修改按钮
          directoryName: row.directoryName // 每行 点击修改按钮赋值给
        }
      }
    },

    // 弹窗确认按钮
    async  btnOk () {
      // 根据点击时赋值的结果 判断 处理新增还是修改
      if (this.dialogType === 'add') {
        // ref获取实例方法
        this.$refs.dialogForm.validate(async valid => {
          // 1.表单为空 中止下面代码
          if (!valid) return
          // 2. 发送添加请求
          await add({
            subjectID: this.directorysForm.subjectID,
            directoryName: this.directorysForm.directoryName
          })
          // 3. 提示消息
          this.$message.success('新增成功')
          // 4. 成功跳转第一页
          this.pageData.page = 1
          // 5.清空数据
          this.$refs.dialogForm.resetFields()
        })
      } else {
        // 点击类型为编辑处理的操作
        if (this.dialogType === 'edit') {
          // 1. 调用接口
          await update(this.directorysForm)
          // 2. 提示消息
          this.$message.success('修改成功')
        }
      }
      // 重新渲染
      this.getDirctorys()
      // 清除表单规则并关闭
      this.closeDialog()
    },

    // 关闭弹窗 && 重置表单校验规则
    closeDialog () {
      // 弹窗关闭
      this.dialogFormVisible = false
      // 表单重置校验
      this.$refs.dialogForm.resetFields()
    },

    // 组件提供的方法格式化内容  状态
    formatState (row, column, cellValue, index) {
      // console.log('每行数据', row, '列', column, '值', cellValue, '下标', index)
      // 自定义对象, cellvalue
      const stateType = [
        {
          id: 0,
          value: '已启用'
        },
        {
          id: 1,
          value: '已禁用'
        }
      ]
      // 数组方法, cellValue赋值给对象中的id
      const obj = stateType.find(item => {
        return item.id === cellValue
      })
      // 返回每项 0 和 1 启用状态
      return obj.value
    },

    // 启用或禁用按钮
    async Disable (id, state, row) {
      // 判断状态
      state = state ? 0 : 1
      //
      this.tableData.forEach(item => {
        if (item.id === id) {
          item.state = state
        }
      })
      // 调用状态接口
      await changeState(row)
    },

    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(id)
        this.getDirctorys()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        // 取消删除业务
      })
    },

    // 搜索和清空
    onSubmit (type) {
      // 点击清空 重新赋值
      if (type === 'clear') {
        this.pageData = {
          directoryName: '',
          state: null
        }
        // 重新渲染
        this.getDirctorys()
      } else if (type === 'search') {
        // 渲染当前状态
        this.getDirctorys({
          state: this.pageData.state === '启用' ? 1 : 0
        })
      }
    },

    // 组件方法获取index 渲染序号
    indexMethod (index) {
      return index + 1
    },

    // 页码函数，val值返回的
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      // 随点击的val值赋值给页面
      this.pageData.pagesize = val
      this.getDirctorys()
    },

    // 当前页码
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      // 随点击的val值赋值给页面
      this.pageData.page = val
      this.getDirctorys()
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
  width: 100%;
}
 ::v-deep .addList {
  color:#fff;
  background-color: #42bb85;
 }
 .elCol {
  margin: 20px 0 10px 20px;
  height: 40px;
  background-color: #f4f4f5;
  // color: white;
 }
 .app-container {
  .alert {
    margin: 20px 0;
  }
   ::v-deep .blockPage {
     margin:20px auto;
     display: flex;
     justify-content: end;
    }
 }
 .dialog-footer {
  display: flex;
  justify-content: end;
 }
</style>
